import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb, Carousel, Row, Col, Icon, Button, Divider, Tabs, List, Typography} from 'antd';
// import Slider from '@/components/Slider'
// import ActivitySlider from '@/components/ActivitySlider'
// import BigTitle from '@/components/BigTitle'
// import AboutUS from '@/components/AboutUS'
// import { BIAOTI, GYWM } from '../../constants'
import styles from './index.less';
// import router from 'umi/router';

const TabPane = Tabs.TabPane;

@connect(({ chart, loading }) => ({
  // chart,
  // loading: loading.effects['chart/fetch'],
}))
class QuestionItem extends Component {
  state = {
  };

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  callback = (key) =>  {
    // console.log(key);
  }

  render() {
    const { data } = this.props;

    return (
      <Row type='flex' justify='center'>
        {data.map((tabs, index1) => (
          <Col span={5} key={index1}>
            <Tabs className={styles.customTabs} key={index1} defaultActiveKey="0" onChange={this.callback}>
              {tabs.tabs.map((tab, index2) => (
                <TabPane tab={<span style={{color: '#333333'}}>{tab.title}</span>} key={index2}>
                  <List
                    // header={<div>Header</div>}
                    // footer={<div>Footer</div>}
                    // bordered
                    dataSource={tab.content}
                    renderItem={item => (<List.Item style={{fontSize: 12, padding: '7px 0'}}>{item}</List.Item>)}
                  />
                </TabPane>
              ))}
              {/*<TabPane tab={<span style={{color: '#333333'}}>报名</span>} key="2">Content of Tab Pane 2</TabPane>*/}
              {/*<TabPane tab={<span style={{color: '#333333'}}>学费</span>} key="3">Content of Tab Pane 3</TabPane>*/}
            </Tabs>
          </Col>
        ))}
      </Row>


    );
  }
}

export default QuestionItem;
